import { ReactNode, useContext } from "react";
import { LevelContext } from "./LevelContext";

interface SectionProps {
  children: ReactNode;
  isFancy?: boolean;
}

function Section({ children, isFancy }: SectionProps) {
  const level = useContext(LevelContext);
  console.log("section level", level);

  return (
    <section className={"section " + (isFancy ? "fancy" : "")}>
      <LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider>
    </section>
  );
}

export default Section;
